<template>
  <div class="order-list">
    <div class="screen">
      <span>兑换时间:</span>
      <div class="screen-item">
        <el-date-picker
          v-model="time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
      <span>会员名称:</span>
      <div class="screen-item">
        <el-input v-model="member_name" placeholder="会员名称"></el-input>
      </div>
      <span>拼团ID:</span>
      <div class="screen-item">
        <el-input v-model="pt_id" placeholder="拼团ID"></el-input>
      </div>
      <span>拼团状态:</span>
      <div class="screen-item">
        <el-select v-model="status">
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          ></el-option>
        </el-select>
      </div>
      <span>订单ID:</span>
      <div class="screen-item">
        <el-input v-model="point_ordersn" placeholder="订单ID"></el-input>
      </div>
      <span>邀请人:</span>
      <div class="screen-item">
        <el-input v-model="invite_member_name" placeholder="邀请人"></el-input>
      </div>
      <el-button type="primary" @click="getList">搜索</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </div>
    <div class="table" ref="table">
      <div class="table-box" ref="tbox">
        <el-table
          :data="list"
          border
          :fit="true"
          :height="oHeight"
          header-cell-class-name="hdCellStyle"
        >
          <el-table-column
            prop="pt_id"
            label="拼团ID"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="member_name"
            label="会员名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="pay_time"
            label="支付时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="expire_time"
            label="拼团截止时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="pt_status_desc"
            label="状态"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="invite_member_name"
            label="邀请人"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="point_ordersn"
            label="订单ID"
            align="center"
          ></el-table-column>
        </el-table>
      </div>

      <div class="paging">
        <el-button type="primary" @click="getList(1)">导出</el-button>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      currentPage: 1,
      statusList: [
        { value: "0", label: "待成团" },
        { value: "1", label: "已成团" },
        // { value: 2, label: "拼团失败" },
      ],
      time: [],
      member_name: "", // 会员名
      pt_id: "", // 拼团id
      status: "", // 拼团状态
      page: 1, // 当前页码
      pageSize: 20, // 每页几条
      point_ordersn: "", // 订单id
      invite_member_name: "", // 邀请人名
      is_export: null, // 是否导出 是:1 否:不传
      total: 0,
      oHeight: 0,
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    let h = this.$refs.tbox.offsetHeight;
    this.$nextTick(()=>{
      this.oHeight = h
    })
  },
  methods: {
    getList(ex) {
      let data = {};
      if (this.time.length && this.time.length > 0) {
        data.start_time = this.time[0] + "00:00:00";
        data.end_time = this.time[1] + "23:59:59";
      }
      if (this.member_name != "") data.member_name = this.member_name;
      if (this.pt_id != "") data.pt_id = this.pt_id;
      if (this.status != "") data.status = this.status;
      if (this.point_ordersn != "") data.point_ordersn = this.point_ordersn;
      if (this.invite_member_name != "")
        data.invite_member_name = this.invite_member_name;
      data.page = this.page;
      data.pageSize = this.pageSize;
      // 导出
      if (ex && ex == 1) {
        var host;
        if (this.$store.state.isServer) {
          host = location.host.replace("admin", "api");
        } else {
          host = location.host + "/api";
        }
        var url =
          location.protocol +
          "//" +
          host +
          "/admin/pointprod/index.php?act=pt&op=ptOrderList&is_export=1";
        for (var i in data) {
          url += "&" + i + "=" + data[i];
        }
        window.location.href = url;
      } else {
        this.$http
          .get("/admin/pointprod/index.php?act=pt&op=ptOrderList", {
            params: data,
          })
          .then((res) => {
            if (res.code == 1) {
              this.list = res.data.list;
              this.total = res.data.totalCount;
            } else {
              this.$message.warning(res.msg);
            }
          });
      }
    },
    reset() {
      this.time = [];
      this.member_name = "";
      this.pt_id = "";
      this.status = "";
      this.page = 1;
      this.pageSize = 20;
      this.point_ordersn = "";
      this.invite_member_name = "";
      this.is_export = null;
      this.getList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.order-list {
  height: 95%;
  display: flex;
  flex-direction: column;
  .screen {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    align-items: center;
    .screen-item {
      margin: 10px;
    }
  }
  .table {
    flex: 1;
    display: flex;
    flex-direction: column;
    .paging {
      display: flex;
      justify-content: space-between;
      height: 40px;
      padding-top: 10px;
    }
    .table-box {
      flex: 1;
    }
  }
}
</style>
